<template>
  <custom-modal-page :visible.sync="visible">
    <div class="process-monitoring-container">
      <div class="header" header="流程监控">
        <a-button @click="closeModal()"> 返回 </a-button>
      </div>
      <div class="main">
        <!-- 锚点占位 -->
        <div id="topSpace"></div>
        <!-- 顶部主流程 -->
        <div class="node-container">
          <flowList
            :source="flowListSource"
            replaceFields="taskNodeDesc"
            @click="flowListClick($event)"
          ></flowList>
        </div>
        <!-- 流程信息 -->
        <a-collapse v-model="activeKey" expandIconPosition="right">
          <a-collapse-panel key="1" :show-arrow="false" title="流程信息">
            <template slot="header">
              <div class="collapse-custom-header">
                {{ activeKey.includes("1") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('1') && 'active']"
                >
                  <bj-icon-font
                    type="xl"
                    color="#0068B7"
                    :size="10"
                  ></bj-icon-font>
                </div>
              </div>
            </template>
            <div class="base-info-container">
              <div
                class="step-details-item flex"
                v-for="item in pageFlowListSource"
                :key="item.id"
                :id="item.$$id"
              >
                <!-- 日期 -->
                <div class="left">
                  <div
                    class="status"
                    :class="filterStatusClass(item.currentStatus)"
                  >
                    {{ item.currentStatus | filterStatusName }}
                  </div>
                  <div class="time">{{ item.operateTime }}</div>
                </div>
                <!-- 分隔线 -->
                <div class="line"></div>
                <!-- 详细信息 -->
                <div class="right">
                  <div class="node-title flex">
                    <div class="title">
                      {{ item.taskNodeDesc }}
                    </div>
                    <div class="people" v-if="item.showInfo != 'XiaDan'">
                      操作人员：{{ item.operatePtuser }}
                    </div>
                  </div>
                  <!------------ 信息中心下发任务单 ------------>
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'XiaDan'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <!-- 文本域 -->
                      <div class="text-container">
                        <a-row>
                          <a-col :span="24">
                            <a-form-model-item label="桥梁名称">
                              <div :title="formData[item.id].bridgeName">
                                {{ formData[item.id].bridgeName }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="幅别">
                              <div :title="formData[item.id].amClass">
                                {{ formData[item.id].amClass }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="跨">
                              <div :title="formData[item.id].span">
                                {{ formData[item.id].span }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="梁号">
                              <div :title="formData[item.id].componentParts">
                                {{ formData[item.id].componentParts }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="梁类型">
                              <div :title="formData[item.id].beamTypeDesc">
                                {{ formData[item.id].beamTypeDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="下发人员">
                              <div :title="formData[item.id].orderUser">
                                {{ formData[item.id].orderUser }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="下发时间">
                              {{ formData[item.id].orderTime }}
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="出梁操作人">
                              {{ formData[item.id].ylUser }}
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="计划生产时间">
                              {{ formData[item.id].planStartTime }} ~
                              {{ formData[item.id].planEndTime }}
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="计划出梁时间">
                              {{ formData[item.id].planJqStartTime }} ~
                              {{ formData[item.id].planJqEndTime }}
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="实际生产时间">
                              {{ formData[item.id].actualStartTime }} ~
                              {{ formData[item.id].actualEndTime }}
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="实际出梁时间">
                              {{ formData[item.id].actualJqEndTime }}
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                  </div>
                  <!-- 现场接单  -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'XianChangJieDan'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <!-- 文本域 -->
                      <div class="text-container">
                        <a-row>
                          <a-col
                            v-bind="colGutter"
                            v-for="(v, i) in formData[item.id]"
                            :key="i"
                          >
                            <a-form-model-item :label="v.taskNodeDesc">
                              <div :title="v.operatePtuser">
                                {{ v.operatePtuser }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                  </div>
                  <!-- 钢筋加工 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'GangJinJiaGong'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="生产开始时间">
                              <div :title="formData[item.id].produceTime">
                                {{ formData[item.id].produceTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="生产结束时间">
                              <div :title="formData[item.id].completeTime">
                                {{ formData[item.id].completeTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="生产用量(kg)">
                              <div :title="formData[item.id].produceUsage">
                                {{ formData[item.id].produceUsage }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="质检人">
                              <div>
                                {{ formData[item.id].testName }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="质检时间">
                              <div>
                                {{ formData[item.id].testTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="质检结果">
                              <div>
                                {{
                                  formData[item.id].testResult == 0
                                    ? "合格"
                                    : formData[item.id].testResult == 1
                                    ? "不合格"
                                    : ""
                                }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                        <a-row
                          v-for="gx in formData[item.id].produceList"
                          :key="gx.id"
                        >
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item
                              label="型号"
                              class="small-form-item"
                            >
                              <div :title="gx.rebarModelDesc">
                                {{ gx.rebarModelDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item
                              label="直径(mm)"
                              class="small-form-item"
                            >
                              <div :title="gx.rebarDiameterDesc">
                                {{ gx.rebarDiameterDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item
                              label="品种"
                              class="small-form-item"
                            >
                              <div :title="gx.rebarTypeDesc">
                                {{ gx.rebarTypeDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item
                              label="数量(kg)"
                              class="small-form-item"
                            >
                              <div :title="gx.rebarNum">
                                {{ gx.rebarNum }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                  </div>
                  <!-- 吊装 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'DiaoZhuang'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="生产线">
                              <div>
                                {{ formData[item.id].prodLineNumDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                  </div>
                  <!-- 合模 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'MoBanAnZhuang'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <!-- <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item label="生产线">
                              <div>
                                {{ formData[item.id].prodLineNumDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col> -->
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item label="开模时间">
                              <div :title="formData[item.id].openTime">
                                {{ formData[item.id].openTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item label="浇筑时间">
                              <div :title="formData[item.id].pourTime">
                                {{ formData[item.id].pourTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col
                            :xs="24"
                            :sm="24"
                            :md="24"
                            :lg="6"
                            :xl="6"
                            :xxl="6"
                          >
                            <a-form-model-item label="合模时间">
                              <div :title="formData[item.id].closeTime">
                                {{ formData[item.id].closeTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 要料申请 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'YaoLiaoShenQing'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container" style="margin-bottom: 10px">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="强度等级">
                              <div :title="formData[item.id].strengthGradeDesc">
                                {{ formData[item.id].strengthGradeDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="方量(m³)">
                              <div :title="formData[item.id].designVolume">
                                {{ formData[item.id].designVolume }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="坍落度(mm)">
                              <div :title="formData[item.id].slump">
                                {{ formData[item.id].slump }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <vxe-table
                      align="center"
                      border
                      :data="formData[item.id].tableData"
                      show-overflow
                      show-header-overflow
                      :column-config="{ resizable: true }"
                      class="scrollbarStyle"
                      ref="xTable"
                    >
                      <vxe-column title="名称" width="200">
                        <template> 设计配合比（kg/m³） </template>
                      </vxe-column>
                      <vxe-column field="cement" title="水泥"> </vxe-column>
                      <vxe-column field="naturalSand" title="细骨料">
                      </vxe-column>
                      <vxe-column field="flyAsh" title="粉煤灰"> </vxe-column>
                      <vxe-column field="water" title="水"> </vxe-column>
                      <vxe-column field="zhongshizi" title="粗骨料(5-10)mm">
                      </vxe-column>
                      <vxe-column field="dashizi" title="粗骨料(10-20)mm">
                      </vxe-column>
                      <vxe-column field="waterReducingAgent" title="外加剂">
                      </vxe-column>
                    </vxe-table>
                  </div>
                  <!-- 拌和生产 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'BanHe'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="开始时间">
                              <div>{{ formData[item.id].startTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="结束时间">
                              <div>{{ formData[item.id].endTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="总方量(m³)">
                              <div>
                                {{
                                  Number(formData[item.id].totalVolume).toFixed(
                                    2
                                  )
                                }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="总盘数">
                              <div>{{ formData[item.id].total || 0 }} 盘</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="初级预警">
                              <div>
                                {{ formData[item.id].chuTotal || 0 }} 盘
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="中级预警">
                              <div>
                                {{ formData[item.id].zhongTotal || 0 }} 盘
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="高级预警">
                              <div>
                                {{ formData[item.id].gaoTotal || 0 }} 盘
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                    <a-button
                      style="margin-left: 20px"
                      type="primary"
                      class="view-details-button"
                      @click="viewTestData(item)"
                    >
                      试验数据
                    </a-button>
                  </div>
                  <!-- 鱼雷罐运输 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'YuLeiGuanYunShu'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="总次数">
                              <div>{{ formData[item.id].total }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="开始时间">
                              <div>{{ formData[item.id].startTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="结束时间">
                              <div>{{ formData[item.id].endTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <!-- <a-col v-bind="colGutter">
                            <a-form-model-item label="总重量/t">
                              <div>{{ formData[item.id].weight }}</div>
                            </a-form-model-item>
                          </a-col> -->
                          <!-- <a-col v-bind="colGutter">
                            <a-form-model-item label="总方量(m³)">
                              <div>
                                {{
                                  Number(formData[item.id].formul).toFixed(2)
                                }}
                              </div>
                            </a-form-model-item>
                          </a-col> -->
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 布料 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'BuLiao'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="布料总次数(次)">
                              <div>{{ formData[item.id].total }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="布料总重量(t)">
                              <div>{{ formData[item.id].weightSum }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="布料开始时间">
                              <div>{{ formData[item.id].startTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="布料结束时间">
                              <div>{{ formData[item.id].endTime }}</div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 振捣 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'ZhenDao'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="振捣总次数(次)">
                              <div>{{ formData[item.id].total }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="振捣频率(Hz)">
                              <div>{{ formData[item.id].frequency }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="振捣开始时间">
                              <div>{{ formData[item.id].startTime }}</div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="振捣结束时间">
                              <div>{{ formData[item.id].endTime }}</div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 开模 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'MoBanChaiChu'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="开模时间">
                              <div :title="formData[item.id].openTime">
                                {{ formData[item.id].openTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="浇筑时间">
                              <div :title="formData[item.id].pourTime">
                                {{ formData[item.id].pourTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="合模时间">
                              <div :title="formData[item.id].closeTime">
                                {{ formData[item.id].closeTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 蒸养 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'ZhengYang'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="养生类型">
                              <div>
                                {{
                                  formData[item.id].type == 1 ? "蒸汽" : "喷淋"
                                }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="开始时间">
                              <div>
                                {{ formData[item.id].minColTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="结束时间">
                              <div>
                                {{ formData[item.id].maxColTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="养生时长(min)">
                              <div>
                                {{ formData[item.id].hourLength }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="平均温度(℃)">
                              <div>
                                {{ formData[item.id].avgTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最高温度(℃)">
                              <div>
                                {{ formData[item.id].maxTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最低温度(℃)">
                              <div>
                                {{ formData[item.id].minTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="平均湿度(%RH)">
                              <div>
                                {{ formData[item.id].avgRh }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最低湿度(%RH)">
                              <div>
                                {{ formData[item.id].minRh }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最高湿度(%RH)">
                              <div>
                                {{ formData[item.id].maxRh }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 喷淋 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'PenLin'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="开始时间">
                              <div>
                                {{ formData[item.id].minColTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="结束时间">
                              <div>
                                {{ formData[item.id].maxColTime }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="养生时长(min)">
                              <div>
                                {{ formData[item.id].hourLength }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="平均温度(℃)">
                              <div>
                                {{ formData[item.id].avgTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最高温度(℃)">
                              <div>
                                {{ formData[item.id].maxTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最低温度(℃)">
                              <div>
                                {{ formData[item.id].minTmp }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 同养试块试验 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'TongYangShiKuaiShiYan'"
                    v-loading="loading[item.id]"
                  >
                    <vxe-table
                      align="center"
                      border
                      :data="formData[item.id].tableData"
                      show-overflow
                      show-header-overflow
                      :column-config="{ resizable: true }"
                      class="scrollbarStyle"
                      ref="xTable"
                    >
                      <vxe-column type="expand" width="40">
                        <template #content="{ row }">
                          <div class="subTable-container">
                            <vxe-table
                              ref="xTable"
                              min-height="120px"
                              max-height="528px"
                              class="scrollbarStyle"
                              align="center"
                              show-overflow
                              show-header-overflow
                              :data="row.dataList"
                              :column-config="{ resizable: true }"
                            >
                              <vxe-column field="kyhz" title="抗压荷载(Kn)">
                              </vxe-column>
                              <vxe-column field="kyqd" title="抗压强度(MPa)">
                              </vxe-column>
                            </vxe-table>
                          </div>
                        </template>
                      </vxe-column>
                      <vxe-column
                        type="seq"
                        width="60"
                        title="序号"
                      ></vxe-column>
                      <vxe-column field="curingAge" title="龄期(天)">
                      </vxe-column>
                      <vxe-column field="trialDate" title="试验时间">
                      </vxe-column>
                      <vxe-column field="testValue" title="强度代表值(MPa)">
                      </vxe-column>
                      <vxe-column field="result" title="试验结果">
                        <template #default="{ row }">
                          <div v-if="row.result == 0">合格</div>
                          <div v-if="row.result == 1">不合格</div>
                        </template>
                      </vxe-column>
                    </vxe-table>
                  </div>
                  <!-- 回弹强度检测 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'HuiTanQiangDuJianCe'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="龄期(天)">
                              <div>
                                {{ formData[item.id].age }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="平均碳化深度(mm)">
                              <div>
                                {{ formData[item.id].carbonization }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <div style="padding: 10px 0">
                      测区混凝土抗压强度换算值(MPa)
                    </div>
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="平均值">
                              <div>
                                {{ formData[item.id].averageValue }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="标准差">
                              <div>
                                {{ formData[item.id].standardDeviation }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="最小值">
                              <div>
                                {{ formData[item.id].minimumValue }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <div style="padding: 10px 0">
                      构件现龄期混凝土强度推定值(MPa)
                    </div>
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="推定值">
                              <div>
                                {{ formData[item.id].inferredValue }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                      <!-- 上传附件 -->
                      <div class="file-container table-style flex">
                        <div class="label">检测报告：</div>
                        <div class="value">
                          <bjUploadFile
                            :viewMode="true"
                            v-model="formData[item.id].file"
                            @download="download($event)"
                            @preview="viewFile($event)"
                            :replaceFields="{
                              fileName: 'realFileName',
                              fileSize: 'fileSize',
                              fileType: 'fileType',
                              fileUrl: 'fileUrl',
                            }"
                          ></bjUploadFile>
                        </div>
                      </div>
                    </a-form-model>
                  </div>
                  <!-- 张拉 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'ZhangLa'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="张拉次数">
                              <div>
                                {{ formData[item.id].total }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="合格数">
                              <div>
                                {{ formData[item.id].qualified }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="不合格数">
                              <div>
                                {{ formData[item.id].unqualified }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="合格率(%)">
                              <div>
                                {{ formData[item.id].rate }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 压浆 -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'YaJiang'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="压浆次数">
                              <div>
                                {{ formData[item.id].total }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="合格数">
                              <div>
                                {{ formData[item.id].qualified }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="不合格数">
                              <div>
                                {{ formData[item.id].unqualified }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="合格率(%)">
                              <div>
                                {{ formData[item.id].rate }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                    <a-button
                      type="primary"
                      class="view-details-button"
                      @click="viewDetails(item)"
                    >
                      查看明细
                    </a-button>
                  </div>
                  <!-- 存梁  -->
                  <div
                    class="node-desc"
                    v-if="item.showInfo == 'CunLiang'"
                    v-loading="loading[item.id]"
                  >
                    <a-form-model>
                      <div class="text-container">
                        <a-row>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="存梁完成时间">
                              <div>
                                {{ formData[item.id].scwcsj }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                          <a-col v-bind="colGutter">
                            <a-form-model-item label="位置">
                              <div>
                                {{ formData[item.id].storageAreaDesc }}
                              </div>
                            </a-form-model-item>
                          </a-col>
                        </a-row>
                      </div>
                    </a-form-model>
                  </div>
                </div>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <!-- 返回顶部按钮 -->
      <a class="go-top-button" href="#topSpace" title="返回顶部">
        <a-icon type="arrow-up" style="font-size: 18px" />
      </a>
    </div>
    <!-- 明细弹窗 -->
    <detailModal
      :visible.sync="detailModalVisible"
      :dataSource="detailsSource"
    ></detailModal>
    <!-- 合模 -->
    <mbzhModal :visible.sync="mbazModalVisible" :dataSource="rows"></mbzhModal>
    <!-- 鱼雷罐 -->
    <chiselRecordModal
      :visible.sync="chiselRecordModalVisible"
      :dataSource="rows"
    ></chiselRecordModal>
    <!-- 张拉明细 -->
    <zlDetailModal
      :visible.sync="zlDetailModalVisible"
      :dataSource="detailsSource"
    ></zlDetailModal>
    <!-- 压浆明细 -->
    <yjDetailModal
      :visible.sync="yjDetailModalVisible"
      :dataSource="detailsSource"
    ></yjDetailModal>
    <!-- 喷淋养生明细 -->
    <plDetailModal
      :visible.sync="plDetailModalVisible"
      :dataSource="rows"
    ></plDetailModal>
    <!-- 蒸汽养生明细 -->
    <zqDetailModal
      :visible.sync="zqDetailModalVisible"
      :dataSource="rows"
    ></zqDetailModal>
    <!-- 布料明细 -->
    <blDetailModal
      :visible.sync="blDetailModalVisible"
      :dataSource="rows"
    ></blDetailModal>
    <!-- 振捣明细 -->
    <zdDetailModal
      :visible.sync="zdDetailModalVisible"
      :dataSource="rows"
    ></zdDetailModal>
    <!-- 实验数据 -->
    <syModal :visible.sync="syModalVisible" :dataSource="rows"></syModal>
  </custom-modal-page>
</template>

<script>
import flowList from "@/components/flow-list";
import detailModal from "./handle/detailModal";
import chiselRecordModal from "./handle/chiselRecordModal";
import zlDetailModal from "./handle/zlDetailModal";
import yjDetailModal from "./handle/yjDetailModal";
import zqDetailModal from "./handle/zqDetailModal";
import plDetailModal from "./handle/plDetailModal";
import blDetailModal from "./handle/blDetailModal";
import zdDetailModal from "./handle/zdDetailModal";
import mbzhModal from "./handle/mbzhModal";
import syModal from "./handle/syModal";
import bjUploadFile from "@/components/bj-upload-file";
import { getLoginData } from "@/tools";
import { downFileByUrl, commonViewFile } from "@/utils";
import { filePath } from "@/api/wisdom-beam/security-app.js";
import {
  getTraceabilityDetail,
  getHeadFlowList,
  getBodyFlowList,
  getShowInfoByFlag,
  getGJJGInfo,
  getYLSQInfo,
  queryDataByComponentParts,
  queryDataByComparts,
  queryStaticsByComparts,
  clothDataStatics,
  cboostDataStatics,
  plDataByComparts,
  zyDataByComparts,
  queryZlDataByComponentParts,
  queryYjDataByComponentParts,
  getTestComponentParts,
} from "@/api/wisdom-beam/quality-app";
export default {
  components: {
    bjUploadFile,
    flowList,
    detailModal,
    mbzhModal,
    chiselRecordModal,
    zlDetailModal,
    yjDetailModal,
    plDetailModal,
    zqDetailModal,
    blDetailModal,
    zdDetailModal,
    syModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    rows: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          Promise.all([this.getHeadFlowList(), this.getBodyFlowList()])
            .then((result) => {})
            .finally((_) => {});
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      detailsSource: [],
      detailModalVisible: false,
      zlDetailModalVisible: false,
      yjDetailModalVisible: false,
      chiselRecordModalVisible: false,
      zqDetailModalVisible: false,
      plDetailModalVisible: false,
      blDetailModalVisible: false,
      zdDetailModalVisible: false,
      mbazModalVisible: false,
      syModalVisible: false,
      colGutter: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 24,
        xl: 12,
        xxl: 8,
      },
      pageLoading: false,
      activeKey: ["1"],
      //顶部流程
      flowListSource: [],
      //页面流程列表
      pageFlowListSource: [],
      //锚点定位标识
      anchorPointEmu: {},
      //
      eventsEmu: {},
      //
      formData: {},
      //
      loading: {},
      //
      dataMap: {
        1: {
          text: {
            style: "normal",
          },
          file: {},
        },
      },
    };
  },
  filters: {
    filterStatusName(val) {
      switch (val) {
        case "2":
          return "已完成";

        case "3":
          return "打回";

        case "5":
          return "整改已完成";

        default:
          break;
      }
    },
  },
  methods: {
    //下载附件
    download(file) {
      let { realFileName, id } = file;
      filePath(id)
        .then((res) => {
          let fileUrl = res.data?.result || "";
          if (fileUrl)
            downFileByUrl(fileUrl + "&attname=" + realFileName, realFileName);
        })
        .catch((_) => {});
    },
    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },
    //实验数据
    viewTestData(item = {}) {
      this.syModalVisible = true;
    },
    //查看明细
    viewDetails(item = {}) {
      let { id, showInfo } = item;
      let { detailsSource = [] } = this.formData[id];
      this.detailsSource = detailsSource;
      switch (showInfo) {
        //合模
        case "MoBanAnZhuang":
          this.mbazModalVisible = true;
          break;

        //开模
        case "MoBanChaiChu":
          this.mbazModalVisible = true;
          break;

        case "BanHe":
          this.detailModalVisible = true;
          break;

        //
        case "YuLeiGuanYunShu":
          this.chiselRecordModalVisible = true;
          break;

        case "BuLiao":
          this.blDetailModalVisible = true;
          break;

        case "ZhenDao":
          this.zdDetailModalVisible = true;
          break;

        //蒸汽养生
        case "ZhengYang":
          this.zqDetailModalVisible = true;
          break;

        //蒸汽养生
        case "PenLin":
          this.plDetailModalVisible = true;
          break;

        //张拉
        case "ZhangLa":
          this.zlDetailModalVisible = true;
          break;

        //压浆
        case "YaJiang":
          this.yjDetailModalVisible = true;
          break;
      }
    },

    //
    filterStatusClass(status) {
      switch (status) {
        case "2":
          return "success";

        case "3":
          return "reject";

        case "5":
          return "recomplete";

        default:
          break;
      }
    },
    //查询头部流程
    getHeadFlowList() {
      let { id = "" } = this.rows;
      return new Promise((resolve, reject) => {
        getHeadFlowList({ id })
          .then((res) => {
            let { data } = res;
            let list = data?.result || [];
            list.forEach((v, i) => {
              let { currentStatus, taskNodeDesc } = v;
              if (currentStatus == "1") {
                v.$$nodeStatus = "current";
              }
              if (currentStatus == "2") {
                v.$$nodeStatus = "active";
              }
              if (currentStatus == "2" && list[i + 1]?.currentStatus != "2") {
                v.$$nodeStatus = "half-active";
              }
              this.anchorPointEmu[taskNodeDesc] = `point_id_${i}`;
              v.$$anchorPoint = `point_id_${i}`;
            });
            this.flowListSource = list;
            resolve(data?.result || []);
          })
          .catch((_) => {
            this.flowListSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询页面体流程数据
    getBodyFlowList() {
      return new Promise((resolve, reject) => {
        let { id = "" } = this.rows;
        let { anchorPointEmu } = this;
        getBodyFlowList({ id })
          .then((res) => {
            let { data } = res;
            let sourceData = data?.result || [];
            sourceData.forEach((v) => {
              let { id, showInfo, currentStatus, taskNodeDesc } = v;
              if (anchorPointEmu[taskNodeDesc]) {
                sourceData.forEach((item) => {
                  if (item.$$id == anchorPointEmu[taskNodeDesc]) {
                    item.$$id = "";
                  }
                });
                v.$$id = anchorPointEmu[taskNodeDesc];
              } else {
                v.$$id = "";
              }
              this.$set(this.formData, id, {});
              if (currentStatus !== "4") {
                if (this.eventsEmu[showInfo]) {
                  this.eventsEmu[showInfo].push(v);
                } else {
                  this.eventsEmu[showInfo] = [v];
                }
              }
            });
            // //事件派发
            this.eventDispatch();
            this.pageFlowListSource = sourceData.filter(
              (v) => v.currentStatus !== "4"
            );
            resolve(sourceData);
          })
          .catch((_) => {
            this.pageFlowListSource = [];
            this.activeKey = [];
            this.formData = {};
            reject();
          })
          .finally((_) => {});
      });
    },

    //事件派发
    eventDispatch() {
      let { eventsEmu } = this;
      Object.keys(eventsEmu).forEach((key) => {
        eventsEmu[key].forEach((v) => {
          //信息中心下发任务单
          if (
            key == "XiaDan" ||
            key == "CunLiang" ||
            key == "DiaoZhuang" ||
            key == "HuiTanQiangDuJianCe"
          ) {
            this.getDetails(v);
          }
          //现场接单【不可编辑】
          if (key == "XianChangJieDan") {
            this.getShowInfoByFlag(v);
          }
          //钢筋加工
          if (key == "GangJinJiaGong") {
            this.getGJJGInfo(v);
          }
          // 合模 / 模板拆除
          if (key == "MoBanAnZhuang" || key == "MoBanChaiChu") {
            this.getMBAZInfo(v);
          }
          //要料申请
          if (key == "YaoLiaoShenQing") {
            this.getYLSQInfo(v);
          }
          //拌和
          if (key == "BanHe") {
            this.queryDataByComponentParts(v);
          }
          //鱼雷罐
          if (key == "YuLeiGuanYunShu") {
            this.getYLGInfo(v);
          }
          //布料
          if (key == "BuLiao") {
            this.getBLInfo(v);
          }
          //振捣
          if (key == "ZhenDao") {
            this.getZDInfo(v);
          }
          //蒸养
          if (key == "ZhengYang") {
            this.getZYInfo(v, "17");
          }
          //喷淋
          if (key == "PenLin") {
            this.getPlInfo(v, "18");
          }
          //同养试块试验
          if (key == "TongYangShiKuaiShiYan") {
            this.getTestInfo(v);
          }
          //张拉
          if (key == "ZhangLa") {
            this.getZLInfo(v);
          }
          //压浆
          if (key == "YaJiang") {
            this.getYJInfo(v);
          }
        });
      });
    },
    //查询信息中心下发任务单数局
    getDetails(target = {}) {
      let { id = "" } = this.rows;
      if (!id) {
        return;
      }
      return new Promise((resolve, reject) => {
        this.$set(this.loading, target.id, true);
        getTraceabilityDetail({ id })
          .then((res) => {
            let { data } = res;
            let {
              prodLineNumDesc = "",
              averageValue = "",
              standardDeviation = "",
              minimumValue = "",
              inferredValue = "",
              age = "",
              carbonization = "",
              configFiles = [],
            } = data?.result?.lcTaskManagerExtend || {};
            switch (target.showInfo) {
              //吊装
              case "DiaoZhuang":
                this.$set(
                  this.formData[target.id],
                  "prodLineNumDesc",
                  prodLineNumDesc
                );
                break;

              //模版安装
              case "MoBanAnZhuang":
                this.$set(
                  this.formData[target.id],
                  "prodLineNumDesc",
                  prodLineNumDesc
                );
                break;

              //回弹强度检测
              case "HuiTanQiangDuJianCe":
                this.$set(
                  this.formData[target.id],
                  "averageValue",
                  averageValue
                );
                this.$set(
                  this.formData[target.id],
                  "standardDeviation",
                  standardDeviation
                );
                this.$set(
                  this.formData[target.id],
                  "minimumValue",
                  minimumValue
                );
                this.$set(
                  this.formData[target.id],
                  "inferredValue",
                  inferredValue
                );
                this.$set(this.formData[target.id], "age", age);
                this.$set(this.formData[target.id], "file", configFiles ?? []);
                this.$set(
                  this.formData[target.id],
                  "carbonization",
                  carbonization
                );

                break;
              default:
                this.$set(this.formData, target.id, data?.result || {});
                break;
            }
            resolve(data?.result || {});
          })
          .catch((_) => {
            this.$set(this.formData, target.id, {});
            reject();
          })
          .finally((_) => {
            this.$set(this.loading, target.id, false);
          });
      });
    },

    //现场接单 不可操作页面查看接口
    getShowInfoByFlag(target = {}) {
      let { id = "" } = this.rows;
      return new Promise((resolve, reject) => {
        getShowInfoByFlag({ id })
          .then((res) => {
            let { data } = res;
            let source = data?.result || [];
            this.$set(this.formData, target.id, source);
            resolve();
          })
          .catch((_) => {
            this.$set(this.formData, target.id, []);
            reject();
          })
          .finally((_) => {});
      });
    },

    //钢筋加工
    getGJJGInfo(target = {}) {
      let { bridgeName, amClass, span, componentParts } = this.rows;
      getGJJGInfo({ bridgeName, amClass, span, componentParts })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },

    //要料申请
    getYLSQInfo(target = {}) {
      let { id } = this.rows;
      getYLSQInfo({ id })
        .then((res) => {
          let { data } = res;
          this.$set(data?.result, "tableData", [data?.result || {}]);
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {
            tableData: [],
          });
        });
    },

    //合模
    getMBAZInfo(target = {}) {
      let { componentParts } = this.rows;
      queryDataByComparts({
        componentParts: componentParts,
      })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
          //合模查询生产线
          if (target.showInfo == "MoBanAnZhuang") {
            this.getDetails(target);
          }
        })
        .catch((_) => {
          this.$set(this.formData, target.id, data?.result || {});
        });
    },

    //拌和(统计、列表)
    queryDataByComponentParts(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let {
              total,
              chuTotal,
              zhongTotal,
              gaoTotal,
              startTime,
              endTime,
              totalVolume,
            } = data?.result || {};
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "totalVolume", totalVolume);
            this.$set(this.formData[id], "total", total);
            this.$set(this.formData[id], "chuTotal", chuTotal);
            this.$set(this.formData[id], "zhongTotal", zhongTotal);
            this.$set(this.formData[id], "gaoTotal", gaoTotal);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //鱼雷罐
    getYLGInfo(target = {}) {
      let { componentParts } = this.rows;
      queryStaticsByComparts({
        componentParts: componentParts,
      })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, data?.result || {});
        });
    },

    //布料
    getBLInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        if (!id) {
          return;
        }
        clothDataStatics({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { endTime, startTime, weightHand, total, weightSum } =
              data?.result || {};
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "weightHand", weightHand);
            this.$set(this.formData[id], "weightSum", weightSum);
            this.$set(this.formData[id], "total", total);
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //振捣
    getZDInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        if (!id) {
          return;
        }
        cboostDataStatics({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { endTime, startTime, total, frequency } = data?.result || {};
            this.$set(this.formData[id], "frequency", frequency);
            this.$set(this.formData[id], "startTime", startTime);
            this.$set(this.formData[id], "endTime", endTime);
            this.$set(this.formData[id], "total", total);
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },
    //蒸气养生
    getZYInfo(target = {}, equType) {
      let { componentParts } = this.rows;
      zyDataByComparts({ componentParts, equType })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },

    //喷淋养生
    getPlInfo(target = {}, equType) {
      let { componentParts } = this.rows;
      plDataByComparts({ componentParts, equType })
        .then((res) => {
          let { data } = res;
          this.$set(this.formData, target.id, data?.result || {});
        })
        .catch((_) => {
          this.$set(this.formData, target.id, {});
        });
    },
    //同养试块试验
    getTestInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        getTestComponentParts({
          componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            this.$set(this.formData[id], "tableData", data?.result || []);
            resolve();
          })
          .catch((_) => {
            this.$set(this.formData[id], "tableData", []);
            reject();
          });
      });
    },

    //张拉
    getZLInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryZlDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { qualified, unqualified, rate, total } = data?.result || {};
            this.$set(this.formData[id], "qualified", qualified);
            this.$set(this.formData[id], "unqualified", unqualified);
            this.$set(this.formData[id], "rate", rate);
            this.$set(this.formData[id], "total", total);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //压浆
    getYJInfo(target = {}) {
      let { tenantCode = "" } = getLoginData();
      return new Promise((resolve, reject) => {
        let { componentParts } = this.rows;
        let { id } = target;
        queryYjDataByComponentParts({
          componentParts: componentParts,
          tenantCode,
        })
          .then((res) => {
            let { data } = res;
            let { qualified, unqualified, rate, total } = data?.result || {};
            this.$set(this.formData[id], "qualified", qualified);
            this.$set(this.formData[id], "unqualified", unqualified);
            this.$set(this.formData[id], "rate", rate);
            this.$set(this.formData[id], "total", total);
            this.$set(
              this.formData[id],
              "detailsSource",
              data?.result?.data || []
            );
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //顶部流程点击事件
    flowListClick(ev) {
      let { $$anchorPoint } = ev;
      let dom = document.createElement("a");
      dom.href = `#${$$anchorPoint}`;
      document.body.appendChild(dom);
      dom.click();
      document.body.removeChild(dom);
    },
    //关闭页面
    closeModal() {
      this.detailsSource = [];
      this.detailModalVisible = false;
      this.zlDetailModalVisible = false;
      this.yjDetailModalVisible = false;
      this.chiselRecordModalVisible = false;
      this.zqDetailModalVisible = false;
      this.plDetailModalVisible = false;
      this.blDetailModalVisible = false;
      this.zdDetailModalVisible = false;
      this.colGutter = {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 24,
        xl: 12,
        xxl: 8,
      };
      this.pageLoading = false;
      this.activeKey = ["1"];
      //顶部流程
      this.flowListSource = [];
      //页面流程列表
      this.pageFlowListSource = [];
      //锚点定位标识
      this.anchorPointEmu = {};
      //
      this.eventsEmu = {};
      //
      this.formData = {};
      //
      this.loading = {};
      //
      this.dataMap = {
        1: {
          text: {
            style: "normal",
          },
          file: {},
        },
      };

      this.$parent.getTableData();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.process-monitoring-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .go-top-button {
    position: fixed;
    width: 40px;
    height: 40px;
    cursor: pointer;
    .flex();
    align-items: center;
    justify-content: center;
    bottom: 60px;
    right: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
  }
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    //流程步骤样式
    .node-container {
      border-bottom: 1px solid #e8ebf0;
    }
    /deep/.ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 15px;
          color: #525a5d;
          font-weight: bold;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    //基本信息
    .base-info-container {
      padding: 0 80px 10px 20px;
      .step-details-item {
        &:last-child {
          .line {
            &::after {
              display: none;
            }
          }
        }
        .left {
          width: 200px;
          height: 20px;
          color: #333;
          text-align: right;
          font-size: 14px;
          .status {
            margin-top: -4px;
            &.success {
              color: #4bc964;
            }
            &.reject {
              color: #ff3f4a;
            }
            &.recomplete {
              color: #0098ff;
            }
          }
        }
        .line {
          width: 13px;
          .flex();
          flex-direction: column;
          align-items: center;
          margin: 0 20px;
          &:before {
            width: 13px;
            height: 13px;
            border: 2px solid #0098ff;
            border-radius: 50%;
            content: "";
            margin-bottom: 4px;
          }
          &::after {
            content: "";
            flex: 1;
            width: 2px;
            background: #0098ff;
            margin-bottom: 4px;
          }
        }
        .right {
          flex: 1;
          margin-bottom: 40px;
          font-size: 14px;
          .node-title {
            color: var(--primary-color);
            margin-top: -4px;
            font-size: 16px;
            margin-bottom: 10px;
            justify-content: space-between;
            position: relative;
            .people {
              position: absolute;
              height: 100%;
              top: 0;
              left: 0;
              text-align: right;
              width: 100%;
            }
            .pec {
              color: #0098ff;
              font-size: 20px;
              margin-top: -4px;
            }
          }
          .view-details-button {
            margin: 10px 0 0 0;
          }
          .node-desc {
            border: 1px solid #ededed;
            padding: 16px 20px;
            /deep/.ant-form {
              .ant-col {
                &:last-child {
                  .ant-form-item {
                    border-right: none;
                  }
                }
              }
              .ant-form-item {
                margin: 0;
                height: 40px;
                border-bottom: 1px solid #ededed;
                border-right: 1px solid #ededed;
                .flex();
                &.item-label-max {
                  .ant-form-item-label {
                    width: 220px;
                  }
                }
                &.small-form-item {
                  .ant-form-item-label {
                    width: 80px;
                  }
                }
                .ant-form-item-label {
                  width: 120px;
                  background: #f3f4f6;
                  line-height: 32px;
                  height: 32px;
                  margin-top: 4px;
                  margin-left: 4px;
                  text-align: left;
                  box-sizing: border-box;
                  padding: 0 10px;
                  flex-shrink: 0;
                  label {
                    color: #666;
                    font-size: 14px;
                  }
                }
                .ant-form-item-control-wrapper {
                  flex: 1;
                  overflow: hidden;
                  .ant-form-item-control {
                    width: 100%;
                    line-height: 40px;
                    padding: 0 10px;
                    color: #2a2b2f;
                    overflow: hidden;
                    .ant-form-item-children {
                      display: block;
                      width: 100%;
                      height: 40px;
                      overflow: hidden;
                      div {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      }
                    }
                  }
                }
              }
            }
            .text-container {
              border: 1px solid #ededed;
              border-bottom: none;
              border-right: none;
              position: relative;
              &::before {
                width: 1px;
                height: 100%;
                background: #ededed;
                content: "";
                position: absolute;
                top: 0;
                right: 0;
              }
              &::after {
                width: 100%;
                height: 1px;
                background: #ededed;
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
              }
              .textarea-item {
                border-bottom: 1px solid #ededed;
                justify-content: start;
                .label {
                  flex-shrink: 0;
                  width: 150px;
                  background: #f3f4f6;
                  line-height: 32px;
                  margin-top: 4px;
                  margin-left: 4px;
                  margin-bottom: 4px;
                  text-align: left;
                  box-sizing: border-box;
                  padding: 0 10px;
                  .flex();
                }
                .value {
                  padding: 6px 10px 6px 10px;
                  color: #2a2b2f;
                  line-height: 24px;
                  word-break: break-all;
                  font-size: 14px;
                }
              }
            }

            .file-container {
              .label {
                color: #666;
                font-size: 14px;
                margin-right: 6px;
                flex-shrink: 0;
              }
              &.table-style {
                border: 1px solid #ededed;
                border-top: none;
                .label {
                  margin: 4px 10px 4px 4px;
                  width: 150px;
                  background: #f3f4f6;
                  box-sizing: border-box;
                  padding: 6px 10px;
                  flex-shrink: 0;
                  color: #666;
                }
                .value {
                  padding: 6px 0;
                  flex: 1;
                }
                /deep/.bj-upload-file {
                  background: red;
                  width: 100%;
                  .choosed-file-warp {
                    width: 100%;
                    box-sizing: border-box;
                    margin: 0;
                    border-radius: 0;
                    border: none;
                    .file-list {
                      padding-left: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    border-top: 1px solid #f3f4f6;
    background-color: #fff;
    .flex();
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>
